<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementById与querySelector的区别</title>
</head>
<body>

    <div>我是第1个</div>
    <div>我是第2个</div>
    <div>我是第3个</div>
    <div>我是第4个</div>
    <div>我是第5个</div>

    <script>
       var divs=document.getElementsByTagName('div'); //返回的动态集合(HTMLCollection)
       var divs2=document.querySelectorAll('div');    //返回静态集合(NodeList)
       console.log(divs);
       console.log(divs2);

       //创建一个新的div,把它添加到body元素中
       var newDiv=document.createElement('div');
       newDiv.innerHTML='我是新的div';
       document.body.append(newDiv);

       console.log(divs); //添加新的div后,HTMLCollection集合显示有6个div
       console.log(divs2);//添加新的div后,NodeList集合显示有5个div

    </script>
</body>
</html>